<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-23 00:12:26
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-23 00:40:42
 * @Description: demo02 jsx代码事实例
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var title = "this is demo";
      var names = ["xiaohong", "xiaolv", "xiaohuang"];
      var arr = [
        <h1 key="arr1">Hello world!</h1>,
        <h2 key="arr2">Hello React</h2>,
      ];
      var show = true;
      var imageSrc = "https://hao.shaohang.xin/icon/logo.png";

      ReactDOM.render(
        <div>
          {/*jsx中这样注释代码*/}
          {/*在 JSX 中嵌入表达式*/}
          <h1>
            {title}
            {1 + 1}
          </h1>
          {/*普通数组渲染*/}
          {names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>;
          })}
          {/*jsx数组*/}
          <div>{arr}</div>
          {/*条件渲染:三目*/}
          {show ? <div>Show</div> : ""}
          {/*条件渲染:&&*/}
          {show && <div>Show</div>}
          {/*在属性值中插入一个 JavaScript 表达式*/}
          <img src={imageSrc} />
        </div>,
        document.getElementById("example")
      );

      // Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
      // 以下两种示例代码完全等效：
      // const element = <h1 className="greeting">Hello, world!</h1>;
      // const element = React.createElement(
      //   "h1",
      //   { className: "greeting" },
      //   "Hello, world!"
      // );
    </script>
  </body>
</html>
